<template>
	<view class="login-all-wrap">

		<cu-custom :bgColor="theme" :isBack="true" textColor="#ffffff">
			<block slot="backText">返回</block>
			<block slot="content">用户登录</block>
		</cu-custom>
		<view class="login-bg">
			<img src="../../static/images/hi_logo.png" alt="HI LOGO" class="login-images">
			<view class="login-font1">
				欢迎登录！
			</view>
			<view class="login-font2">
				诺 信 在 线 教 育 平 台
			</view>
		</view>
		<view class="login-content">
			<!-- 	<image class="back-image" src="../../static/login_exit@2x.png" @click="back"></image>
			
			<view class="top-wrap">
				<button class="pass-login-btn currentLogin">密码登录</button>
			</view> -->

			<!-- <view class="text-center" style="padding-bottom: 70rpx;font-size: 55rpx;"></view> -->

			<view class="px-2 login-input-wrap">
				<view class="mb-2">
					<view class="input-name">
						手机号
					</view>
					<view class="login-view">
						<image class="search_home" src="../../static/login_phone.png"></image>
						<input type="number" confirm-type="search" placeholder="请输入手机号"
							placeholder-style="color:#D3D3D3;" v-model="username" />
					</view>
				</view>
				<view class="verify-code-wrap">
					<view class="input-name">
						密码
					</view>
					<view class="login-view">
						<image class="search_home" src="../../static/login_verify.png"></image>
						<input type="password" confirm-type="search" placeholder="请输入密码"
							placeholder-style="color:#D3D3D3;" v-model="password" />
					</view>
				</view>
				<view class="newstate"><template v-if="agree == false">
						<image @click="agreeme" class="agree" src="../../static/check_nor.png" mode="aspectFit"></image>
					</template>
					<template v-else>
						<image @click="agreeme" class="agree" src="../../static/check_sel.png" mode="aspectFit"></image>
					</template>
					<view class="flex align-center login-botttom-text font-sm">
						我已阅读并同意<text @click="gotoxieyi(0)" class="xieyi font-sm">《用户服务协议》</text>和<text @click="gotoxieyi(1)"
							class="xieyi font-sm">《隐私保护政策》</text>
					</view>
				</view>

				<view class="login-btn-wrap py-2 px-2">

					<button enabled="enabled" class="text-white"s
						style="border-radius: 50rpx; border: 0; background: #3694EF;" type="primary"
						:class="{ opatity: enabled}" @click="submit">
						登录
					</button>
					<!--
					<view @click="register" class="reg-btn">注册账号</view>
					<navigator class="forget-pass" url="/pages/forget_pass/forget_pass">忘记密码</navigator>
				-->
				</view>

				<view class="flex align-center justify-center pt-1 pb-3 wx-view">
					<button @click="wechatlogin" style="background-color: #FFFFFF;">
						<view class="loginThreeHide uni-tag-text--primary font-sm loginThreeShow wx-login">
							<image class="login-icon" src="../../static/images/login_wx.png" mode=""></image>
							<text class="login-icon-text font-sm">微信登录</text>
						</view>
					</button>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	const app = getApp();
	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				StatusBar: this.StatusBar,
				theme: '', //全局颜色变量
				// app.globalData.theme.backgroundColor
				username: "",
				password: "",
				agree: false, //是否同意协议
				phone: "",
			}
		},
		onLoad(option) {
			let {
				statusBarHeight
			} = uni.getSystemInfoSync();
			this.statusBarHeight = statusBarHeight;
		},
		computed: {
			// 登录按钮 是否禁用
			enabled: function() {
				if (this.username.length >= 11 && this.password.length >= 6) {
					// return false;   // 暂不支持手机号密码登录
					return true;
				}
				return true;
			},
		},
		methods: {
			// 是否同意协议
			agreeme() {
				if (this.agree == true) {
					this.agree = false;
				} else {
					this.agree = true;
				}
			},
			// 协议跳转
			gotoxieyi(item) {
				if (item == '1') {
					uni.navigateTo({
						url: '../login/xieyi?type=4',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				} else {
					uni.navigateTo({
						url: '../login/xieyi?type=5',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}

			},
			// 注册
			register() {
				uni.navigateTo({
					url: "../reg/reg"
				})
			},
			// 隐藏登录页面
			back() {
				console.log(getCurrentPages())
				uni.navigateBack({
					delta: 1
				});
			},
			// 数据验证
			validate() {
				var mPattern = /^1[3456789][0-9]\d{8}$/;
				this.phone = this.username;
				if (!mPattern.test(this.phone)) {
					uni.showToast({
						title: '手机号格式不正确',
						icon: 'none',
						duration: 2000
					});
					return false;
				}
				//更多验证
				return true;
			},

			// 微信登录
			wechatlogin() {
				if (this.agree == false) {
					uni.showToast({
						title: '请阅读并同意相关协议',
						icon: 'none'
					});
					return;
				}
				let gData = app.globalData;
				uni.showLoading({
					title: '',
					mask: true
				});

				var that = this
				// 获取用户名  获取性别 获取头像 获取js_code去换取后台返回的openID
				uni.getUserProfile({
					desc: 'Weixin',
					lang: 'zh_CN',
					success: function(infoRes) {
						//infoRes里面有用户信息需要的话可以取一下
						let username = infoRes.userInfo.nickName; //用户名
						let gender = infoRes.userInfo.gender; //用户性别
						let avatarUrl = infoRes.userInfo.avatarUrl; //头像
						uni.getSetting({
							success(res) {
								if (!res.authSetting['scope.userInfo']) {
									uni.authorize({
										scope: 'scope.userInfo',
										success() {
											uni.setStorageSync('wxUserName', username);
											uni.setStorageSync('wxGender', gender);
											uni.setStorageSync('wxHeadImg', avatarUrl);

											uni.navigateTo({
												url: './auth?backurl=' + that.backurl
											})
										},
										fail: function(res) {
											console.log("未授权1")
										}
									})
								} else {
									uni.setStorageSync('wxUserName', username);
									uni.setStorageSync('wxGender', gender);
									uni.setStorageSync('wxHeadImg', avatarUrl);
									uni.navigateTo({
										url: './auth'
									})
								}
							},
							fail: function(res) {
								console.log("未授权2")
							},
						})
					},
					fail: function(res) {
						console.log(res)
						console.log("未授权3")
					}
				})
			},

			// 提交按钮
			submit() {

				if (this.agree == false) {
					uni.showToast({
						title: '请阅读并同意相关协议',
						icon: 'none'
					});
					return;
				}

				uni.showModal({
					title: "登录提示",
					content: "请您使用微信登录！",
					showCancel: false,
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			}
		}
	}
</script>

<style>
	@import url("/static/css/search/search.css");

	page {
		height: 100vh;
		overflow: hidden;
		background: radial-gradient(circle farthest-side at 0 0,rgb(54,147,240) 0%,rgb(255, 255, 255) 100%) no-repeat;
		background-size: cover;
		background-repeat: no-repeat;
	}

	.login-all-wrap {
		height: 100%;
	}

	.login-bg {
		width: 100%;
		height: 30%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-left: 70rpx;
		color: #FFFFFF;

	}

	.login-images {
		margin-top: 50rpx;
		width: 100rpx;
		height: 100rpx;
		margin-bottom: 10rpx;
	}

	.login-font1 {
		font-size: 40rpx;
		font-weight: 500;
		margin: 15rpx 0;
	}

	.login-font2 {
		font-size: 35rpx;
	}

	.login-content {
		width: 100%;
		height: 70%;
		background-color: #FFFFFF;
		border-top-left-radius: 2em;
		border-top-right-radius: 2em;
		padding-top: 100rpx;
	}

	.back-image {
		width: 40rpx;
		height: 40rpx;
		margin-left: 20rpx;
		float: left;
		margin-top: 20rpx;
	}

	.reg-btn {
		position: absolute;
		left: 40rpx;
		margin-top: 30rpx;
		font-size: 26rpx;
		color: #45DCAC;
	}

	.login-botttom-text {
		color: #646464;
		margin-left: 10rpx;
		height: 40rpx;
		line-height: 40rpx;
		width: 100%;
	}

	.newstate {
		width: 100%;
		display: flex;
		flex-direction: row;
		margin-top: 15rpx;
		height: 40rpx;
		/* padding-left: 45rpx; */
	}

	.agree {
		width: 30rpx;
		height: 30rpx;
		margin-top: 5rpx;
		margin-left: 10rpx;
	}

	/*三方登录默认隐藏*/
	.loginThreeHide {
		display: none;
	}

	.loginThreeShow {
		display: inline-block;
	}

	.wx-view {
		margin-top: 30rpx;
	}

	.wx-login {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.top-wrap button {
		display: inline-block;
		background-color: #FFFFFF;
		overflow: inherit;

	}

	button::after {
		border: none;
	}

	.pass-login-btn {
		/* #ifndef H5 */
		margin-top: 80rpx;
		/* #endif */
		font-size: 30rpx;
		color: #646464;
	}

	.currentLogin {
		font-weight: bold;
		font-size: 44rpx;
	}

	/* 输入框部分 */
	.login-input-wrap input {
		color: #000000;
	}

	/* 	.border-bottom {
		height: 55rpx;
	}

	.input-phone{
		margin-left: 5rpx;
		background: left center url('../../static/login_phone.png') no-repeat;
		background-size: 35rpx;
	}
	.input-password{
		margin-left: 5rpx;
		background: left center url('../../static/login_verify.png') no-repeat;
		background-size: 33rpx;
	} */

	.login-view {
		width: 100%;
		height: 55rpx;
		border-bottom: 1px solid #E8E8E8;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.login-view image {
		margin: 0;
		padding: 0;
		margin-left: 10rpx;
	}

	.login-view input {
		height: 100%;
		width: 100%;
		padding-left: 25rpx;
	}

	.verify-code-wrap {
		margin-top: 60rpx;
	}

	.input-name {
		font-weight: bold;
		margin: 5rpx 0;
		font-size: 30rpx;
	}

	/*登录按钮部分*/
	.login-btn-wrap {
		margin-top: 60rpx;
		height: 90rpx;
	}

	.login-btn-wrap button {
		font-size: 30rpx;
		height: 100%;
		line-height: 90rpx;
	}

	/* 登录按钮 输入内容时,去掉灰色效果 */
	/* 	.login-btn {
		background: #3694EF;
	} */

	.opatity {
		opacity: 0.5;
	}

	/* 登录图标 */
	/* 	
	.login-icon-all-wrap {
		margin-top: 320rpx;
	 }*/

	.login-icon {
		color: #60E28B;
		display: inline-block;
		width: 48rpx;
		height: 48rpx;
		text-align: center;
		line-height: 88rpx;
		font-size: 80rpx;
		margin-right: 20rpx;
	}

	.uni-tag-text--primary {
		margin: 0 60rpx;
	}

	.uni-tag-text--primary text {
		/* display: block; */
	}

	.login-icon-text {
		color: #646464 !important;
	}

	.xieyi {
		color: #3694EF;
	}

	/* 忘记密码 */
	.forget-pass {
		font-size: 26rpx;
		color: #C9C9C9;
		text-align: right;
		margin-top: 30rpx;
	}

	.px-2 {
		padding: 0 45rpx;
	}
</style>